<template>
  <div class="productsShow">
    <product-head
      @clickSort="clickSort"
      :treeData="treeData"></product-head>
    <product-list
      :productType="productType"
      :dataList="dataList"></product-list>
  </div>
</template>

<script>
import ProductHead from './ProductHead'
import ProductList from './ProductList'
import { getProductType, getAllProducts, getProductsByType } from '@/request/api'
export default {
  name: 'productsShow',
  components: {
    ProductHead,
    ProductList
  },
  data () {
    return {
      treeData: [],
      dataList: [],
      img_front: 'http://backmanage.yuxjt.com/',
      productType: '全部'
    }
  },
  created () {
    // 获取产品分类数据
    this.treeData.push({text: '全部', children: [ {text: '查看全部', id: 999} ]})
    getProductType().then(res => {
      res.forEach(item => {
        const firstTree = {}
        firstTree.text = item.type_name
        firstTree.children = item.childs.map(chd => {
          const oneChd = {}
          oneChd.id = chd.id
          oneChd.text = chd.type_name
          return oneChd
        })
        this.treeData.push(firstTree)
      })
    })

    // 获取所有产品
    this.getAllType()
  },
  mounted () {},
  methods: {
    clickSort (data) {
      this.productType = data.text
      if (data.id === 999) {
        this.getAllType()
      } else {
        // 点击分类，切换图片
        getProductsByType({typeId: data.id}).then(res => {
          this.dataList = res.map(item => {
            const imgPath = this.img_front + item.imgPath
            item.imgPath = imgPath
            return item
          })
        })
      }
    },
    getAllType () {
      // 获取所有产品
      getAllProducts().then(res => {
        this.dataList = res.map(item => {
          const imgPath = this.img_front + item.imgPath
          item.imgPath = imgPath
          return item
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .productsShow {

  }
</style>
